<template>
  <el-dialog class="popup-box-select-project" v-model="dialogVisible" title="展会选择" width="30%" :close-on-click-modal="false" :close-on-press-escape="false" align-center>
    <ul class="ul-box">
<!--      <li>展会名称</li>-->
      <li class="ul-li-item" @click="activeList(item.id,index)" :style="{backgroundColor: item.isSelect ? '#399ad3' : ''}" v-for="(item,index) in list.value" :key="item.id">{{item.fairName}}</li>
    </ul>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose(false)">取消</el-button>
        <el-button type="primary" @click="selectConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch,reactive } from 'vue'
import {useRouter} from "vue-router";
import {_getExhibitionList} from "../../http/api.js";

const router = useRouter()
const props = defineProps({
  showDialog: Boolean,
})
const $emit = defineEmits(['showDialogEmit']);
const dialogVisible = ref(false);

watch(() => props.showDialog,(val) => {
  dialogVisible.value = val;
})
watch(dialogVisible,(val) => {
  $emit('showDialogEmit',val)
})
const handleClose = () => {
  dialogVisible.value = false;
}
let list = reactive([]);
const exhibitionList = () => {
  _getExhibitionList()
      .then(res => {
        console.log(res);
        if(res.data.ok) {
          list.value = res.data.data;
          sessionStorage.setItem('projectId',list.value[list.value.length - 1].id);
        }
      })
}
exhibitionList();

let selectId = ref('');
// 列表点击
const activeList = (id,index) => {
  list.value.forEach((v,i) => list.value[i]['isSelect'] = false)
  list.value[index]['isSelect'] = true;
  selectId.value = id;
}
// 选择确定
const selectConfirm = () => {
  sessionStorage.setItem('projectId',selectId.value);
  handleClose();
  location.reload()
}
</script>

<style scoped lang="scss">
.ul-box{
  list-style: none;
  .ul-li-item{
    padding: 5px;
    cursor: pointer;
    border-radius: 2px;
  }
  .ul-li-item:hover{
    background-color: #d6dee0;
  }
}
</style>